<template>
    <div id="" class="ve">
      <div><h3>信息展示</h3></div>
      <!--车辆详情-->
      <div>
        <ul class="xq">
          <li>
            <div>编号</div>
            <div v-for="item in xiangqing">{{item.serial_number}}</div>
          </li>
          <li>
            <div>车辆品牌</div>
            <div v-for="item in xiangqing">{{item.manufacturing_company}}</div>
          </li>
          <li>
            <div>购买时间</div>
            <div v-for="item in xiangqing">{{item.purchasing_data}}</div>
          </li>
          <li>
            <div>车牌号</div>
            <div v-for="item in xiangqing">{{item.license_plate_number}}</div>
          </li>
          <li>
            <div>车辆类型</div>
            <div v-for="item in xiangqing">{{item.model_of_car}}</div>
          </li>
          <li>
            <div>总里程</div>
            <div v-for="item in xiangqing">{{item.the_total}}</div>
          </li>
          <li>
            <div>油耗</div>
            <div v-for="item in xiangqing">{{item.fuel_consumption}}</div>
          </li>
          <li>
            <div>基本费用</div>
            <div v-for="item in xiangqing">{{item.basic_maintenance_cost}}</div>
          </li>
          <li>
            <div>养路费</div>
            <div v-for="item in xiangqing">{{item.road_toll}}</div>
          </li>
          <li>
            <div>总费用</div>
            <div v-for="item in xiangqing">{{item.cumulative_total_cost}}</div>
          </li>
          <li>
            <div>核载人数</div>
            <div v-for="item in xiangqing">{{item.busload}}</div>
          </li>
          <li>
            <div>箱数</div>
            <div v-for="item in xiangqing">{{item.carton_numbers}}</div>
          </li>
          <li>
            <div>载重</div>
            <div v-for="item in xiangqing">{{item.load_capacity}}</div>
          </li>

        </ul>
      </div>
    </div>
</template>

<script>
  import { Toast } from 'mint-ui';
    export default {
        name: "vehicle_information",
      data(){
          return{
            xiangqing:[]
          }
      },
      created(){
        this.getchusi();
      },
      methods:{
        //请求初始信息
        getchusi:function () {
          var url = "../../../static/home.json";
          this.$http.get(url).then(function (response) {
            if (response.body.status != 0) {
              Toast({  //mint-ui 提示
                message: '数据异常',
                position: 'bottom',
                duration: 5000
              });
            }
            this.xiangqing = response.body.che;

            this.place = "原用户名" + /*this.username;*/response.body.username;
          })
        }
      }
    }
</script>

<style scoped>
  .ve{width: 100%}
  .xq{
    padding: 20px 10px;
    width: 100%;
    font-size:16px;
    color: black;
    display: flex;
    justify-content: center;
  }
  .xq>li{
    padding: 5px 4px;
    text-align: left;
  }
  .xq>li div {
    min-height: 24px;
    line-height: 24px;
  }
  .xq>li>div:not(:nth-child(1)){
    font-size: 14px;
  }
</style>
